<template>
  <view class="content">
    <view class="title_box">
      <text class="green_ornament"></text>
      <text>实验任务详情</text>
    </view>
    <view class="li_box">
      <view class="li_content">
        <view class="li_label">开始时间</view>
        <view class="li_input">
    <input class="border_input" @click="startTime" v-model="this.obj.beginTime" disabled type="text" />
        </view>
      </view>
      <view class="li_content">
        <view class="li_label">结束时间</view>
        <view class="li_input">
          <input class="border_input" @click="startTimes" v-model="this.obj.endTime" disabled type="text" />
        </view>
      </view>
      <view class="li_content">
        <view class="li_label">项目名称</view>
        <view class="li_input">
          <input class="border_input" v-model="this.obj.itemName" readonly type="text" />
        </view>
      </view>
      <view class="li_content">
        <view class="li_label">原料属性</view>
        <view class="li_input">
          <picker @change="bindPickerYuan" :value="index" :range="yuan">
            <input class="border_input" disabled v-model="this.obj.rawMaterialProperty" readonly type="text" />
          </picker>
        </view>
      </view>
      <view class="li_content">
        <view class="li_label">样品来源</view>
        <view class="li_input">
          <picker @change="bindPickerYang" :value="index" :range="yang">
            <input class="border_input" disabled v-model="this.obj.sampleSource" readonly type="text" />
          </picker>
        </view>
      </view>
      <view class="li_content">
        <view class="li_label">发起理由</view>
        <view class="li_input">
          <input class="border_input" v-model="this.obj.reason" readonly type="text" />
        </view>
      </view>
      <view class="li_content">
        <view class="li_label">检测要求</view>
        <view class="li_input">
          <input class="border_input" v-model="this.obj.detectionRequirement" readonly type="text" />
        </view>
      </view>
    </view>
    <u-line color="#c2c9c4" />
    <view class="li_content" v-if="flag==1" style="flex-direction: column; align-items: start">
      <view class="li_label">已检测</view>
      <div style="height: 10px;"></div>
      <view class="li_input" style="width: 100%">
        <div v-for="item in detectionIndicatorArrs">
          <div>{{ item.detectionIndicator }}({{ item.english }})</div>
        </div>
      </view>
    </view>
    <view class="li_content" style="flex-direction: column; align-items: start">
      <view class="li_label">检测项目</view>
      <div style="height: 10px;"></div>
      <view class="li_input" style="width: 100%">
        <!-- <div v-for="item in detectionIndicatorArr">
          <div>{{ item.detectionIndicator }}({{ item.english }})</div>
        </div> -->
        <u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange">
          <u-checkbox :customStyle="{ marginBottom: '8px' }" v-for="(item, index) in detectionIndicatorArr" :key="index"
            :label="item.detectionIndicator" :name="item.id">
          </u-checkbox>
        </u-checkbox-group>
      </view>
    </view>
    <view class="btn_box">
      <view class="red_btn"  v-if="flag==1" @click="del">删除需求</view>
      <view class="green_btn" v-if="flag==1" @click="update">修改需求</view>
      <view class="green_btn" v-if="flag==2" @click="add">新增需求</view>
    </view>
    <u-overlay :show="shows" @click="shows = false">
		<view class="warp">
			<view class="rect" @tap.stop>
        <div style="text-align: center;font-size: 18px;font-weight: bold;">选择时间</div>
        <div style="height: 30px;"></div>
        <div style="display: flex;justify-content: center;">
        <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="uni-input">{{date}}</view>
					</picker>
        </div>
        <div style="height: 20px;"></div>
          <div style="display: flex;justify-content: center;">
            <picker mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange">
						<view class="uni-input">{{time}}</view>
					</picker>
          </div>
          <div style="height: 30px;"></div>
          <button style="width: 90%;" @click="yesChooseDate">确认</button>
      </view>
		</view>
	</u-overlay>
  </view>
</template>
<script>
import { processDetailId,requirementEdit,processAllList,requirementAdd,requirementDel } from '../api/api.js';
import { typeList, detail } from '../../common/example.js';
export default {
  data() {
    return {
      
      shows:false,
      checkboxValue1: [],
      obj: {},
      styles: {
        borderColor: "#1a512c",
      },
      yuan: [],
      yang: [],
      seaYuan: [],
      seaYang: [],
      show: false,
      detectionIndicatorArr: [],
      detectionIndicatorArrs:[],
      flag:0,
      date:'选择日期',
      time:'选择时间',
      dateFlag:0
    };
  },
  methods: {
    add(){
      const isEmptyField = Object.keys(this.obj).some(key => {
        return this.obj[key] === '' || this.obj[key] === null || this.obj[key] === undefined;
      });
      if(isEmptyField){
        uni.showToast({
            title: '请输入完整',
            duration: 2000,
            icon:'none'
          });
      }else{
        requirementAdd(this.obj).then(res=>{
        if(res.data.code==200){
          uni.showToast({
            title: res.data.msg,
            duration: 2000
          });
          setTimeout(()=>{
            uni.navigateBack({
               delta: 1
            });
          },1000)
        }else{
          uni.showToast({
            title: res.data.msg,
            duration: 2000,
            icon:'none'
          });
        }
      })
      }
      
    },
    yesChooseDate(){
      if(this.dateFlag==1){
        this.obj.beginTime = this.date+' '+this.time+':00';
      }else{
        this.obj.endTime = this.date+' '+this.time+':00';
      }
      this.shows = false;
      this.date = '选择日期';
      this.time = '选择时间'
    },
    startTime(){
      this.shows = true;
      this.dateFlag = 1;
    },
    startTimes(){
      this.shows = true;
      this.dateFlag = 2;
    },
    bindDateChange: function(e) {
            this.date = e.detail.value
        },
        bindTimeChange: function(e) {
            this.time = e.detail.value
        },
    fun() {
      typeList().then((res) => {
        console.log(res);
        let type = res.data.data.find((item) => item.constantName == "原料属性");
        let types = res.data.data.find((item) => item.constantName == "样品来源");
        if (type && types) {
          detail({ id: type.id }).then((res) => {
            console.log(res, "原料属性");
            this.yuan = res.data.data.map((item) => item.constantName);
            this.seaYuan = res.data.data;
          });
          detail({ id: types.id }).then((res) => {
            console.log(res, "样品来源");
            this.yang = res.data.data.map((item) => item.constantName);
            this.seaYang = res.data.data;
          });
        }
      });
    },
    bindPickerYuan(e) {
      const value = e.detail.value;
      this.obj.rawMaterialProperty = this.seaYuan[value].constantName;
    },
    bindPickerYang(e) {
      const value = e.detail.value;
      this.obj.sampleSource = this.seaYang[value].constantName;
    },
    checkboxChange(n) {
      console.log('change', n);
      // const selectedItems = n.map(id => {
      //   return { 
      //     id: id,
      //     name: this.detectionIndicatorArr[id].detectionIndicator
      //     };

      // });
      // console.log(selectedItems, 'sele');
      this.obj.processDetailIds = n;
    },
    allProcess(){
      processAllList().then(res=>{
        console.log(res.data,'process');
      this.detectionIndicatorArr = res.data.data;
      })
    },
    update(){
      requirementEdit(this.obj).then(res=>{
        console.log(res,'res');
        if(res.data.code==200){
          uni.showToast({
            title: res.data.msg,
            duration: 2000
          });
          setTimeout(()=>{
            uni.navigateBack({
               delta: 1
            });
          },1000)
        }else{
          uni.showToast({
            title: res.data.msg,
            duration: 2000,
            icon:'none'
          });
        }
      })
    },
    del(){
      console.log(this.obj);
      let t = this;
      uni.showModal({
        title: '删除需求',
        content: '是否删除当前需求',
        success: function (res) {
          if (res.confirm) {
            console.log('用户点击确定');
            requirementDel({
              ids:[t.obj.id]
            }).then(res=>{
              if(res.data.code==200){
          uni.showToast({
            title: res.data.msg,
            duration: 2000
          });
          setTimeout(()=>{
            uni.navigateBack({
               delta: 1
            });
          },1000)
        }else{
          uni.showToast({
            title: res.data.msg,
            duration: 2000,
            icon:'none'
          });
        }
            })
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });
    }
  },
  onShow() {

    this.allProcess();
    this.fun();
  },
  onLoad(options) {
    console.log(options, 'options');
    this.flag = options.flag;
    if (options.flag == 1) {
      this.obj = uni.getStorageSync('demandDetail');
      processDetailId(this.obj.id).then(res => {
      console.log(res.data);
      this.detectionIndicatorArrs = res.data.data;
    })
    } else {
      this.obj = {};

    }
    
  }
};
</script>
<style lang="scss" scoped>
.pop_box {
  width: 600rpx;
  box-sizing: border-box;
  padding: 20rpx;
  background-color: #e3ede2;
  font-size: 32rpx;
  border-radius: 10rpx;
  color: #1a512c;
  font-weight: 700;

  .pop_title {
    margin-bottom: 20rpx;
  }

  .pop_btn_box {
    margin-top: 40rpx;
    width: 100%;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .back_btn {
      width: 200rpx;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10rpx;
      background-color: #fff;
      color: #1a512c;
      font-weight: 700;
      border: #1a512c 2rpx solid;
    }

    .submit_btn {
      background-color: #1a512c;
      color: #fff;
    }
  }
}

.content {
  width: 100vw;
  min-height: 100vh;
  box-sizing: border-box;
  padding: 30rpx;
  background-color: #e3ede2;
  font-size: 32rpx;
  color: #1a512c;

  .title_box {
    display: flex;
    align-items: center;

    .green_ornament {
      width: 8rpx;
      height: 30rpx;
      background-color: #1a512c;
      margin-right: 20rpx;
    }
  }

  .li_box {
    margin-top: 20rpx;
  }
}

.li_content {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;

  .li_label {
    font-weight: 700;
    margin-right: 30rpx;
    width: 20%;
  }

  .li_input {
    width: 80%;

    .border_input {
      border: 2rpx solid #1a512c;
      border-radius: 10rpx;
      height: 50rpx;
      width: 100%;
      text-align: center;
    }
  }
}

.textarea_border {
  margin-top: 20rpx !important;
  height: 200rpx !important;
}

.btn_box {
  color: #fff;
  font-size: 34rpx;
  font-weight: 700;
  width: 100%;
  height: 100rpx;
  margin-top: 40rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .red_btn {
    background-color: #d93434;
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 300rpx;
  }

  .green_btn {
    background-color: #1b9c46;
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 300rpx;
  }
}
.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.rect {
		width: 80vw;
		height: 30vh;
		background-color: #fff;
    border-radius: 5px;
    padding: 10px 0 10px 0;
	}
</style>
